// 项目初始化
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
// 超链接
a {
  text-decoration: none;
}
// 媒体查询,控制页面大于750px时也按照750px来显示
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important; //提权是为了不让flexible.js影响html里面的字体大小
  }
}
// body初始化
body {
  min-width: 320px;
  max-width: 750px;
  // width: 750px;
  background-color: #f2f4f7;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  // height: 33.333333rem;
}

.top-hd {
  height: 0.866667rem;
  line-height: 0.866667rem;
  text-align: center;
  font-size: 0.466667rem;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

section {
  background-color: #fff;
  padding-bottom: 0.333333rem;
  .nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .nav-items {
      flex: 33.33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.333333rem;
      margin-bottom: 0.333333rem;
      [class^="nav-items-icon"] {
        width: 0.933333rem;
        height: 0.933333rem;
        background: url(../icons/icon1.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-items-icon1 {
        background: url(../icons/icon1.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-items-icon2 {
        background: url(../icons/icon2.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-items-icon3 {
        background: url(../icons/icon3.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-items-icon4 {
        background: url(../icons/icon4.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-items-icon5 {
        background: url(../icons/icon5.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-items-icon6 {
        background: url(../icons/icon6.png) no-repeat center top;
        background-size: 0.933333rem 0.933333rem;
      }
      .nav-item-name {
        font-size: 0.333333rem;
        color: #707070;
        margin-top: 0.106667rem;
      }
    }
  }
  .go {
    padding: 0 0.066667rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.guidence {
  margin-top: 0.066667rem;
  padding: 0.466667rem 0.2rem;
  background-color: #fff;
  .gd-hd {
    height: 0.533333rem;
    line-height: 0.533333rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    h4 {
      position: relative;
      font-size: 0.373333rem;
      padding-left: 0.546667rem;
      padding-top: 0.026667rem;
      &::before {
        position: absolute;
        top: 0.013333rem;
        left: 0;
        content: "";
        display: block;
        width: 0.533333rem;
        height: 0.533333rem;
        background: url(../icons/i2.png) no-repeat center top;
        background-size: 0.533333rem 0.533333rem;
      }
    }
    .more {
      font-size: 0.146667rem;
      color: #999999;
    }
  }
}
// 第一个轮播图
.gd-bd {
  position: relative;
  margin-top: 0.453333rem;
  .swiper-container {
    // 添加定位，避免箭头的位置偏差

    // width: 100%;
    //改写装轮播图盒子的大小
    width: 7.2rem;
    height: 100%;
  }

  .swiper-slide {
    text-align: center !important;
    font-size: 0.24rem;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
    opacity: 0.3;

    a {
      width: 4.506667rem;
      height: 5.013333rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      width: 3.6rem;
      margin-top: 0.32rem;
    }
  }

  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1);
    z-index: 999;
    // 当激活的时候透明度正常
    opacity: 1;
  }
}

// 箭头的大小
.swiper-button-next {
  color: #333;
}
.swiper-button-prev {
  color: #ccc;
}
.swiper-button-next,
.swiper-button-prev {
  width: 0.333333rem;
  height: 0.466667rem;
  &:hover {
    color: #333;
  }
}

// 学习模块
.study {
  margin-top: 0.133333rem;
  margin-bottom: 1.333333rem;
  padding: 0.32rem;
  background-color: #fff;

  .stu_hd {
    display: flex;
    justify-content: space-between;
    height: 0.533333rem;
    line-height: 0.533333rem;
    h4 {
      position: relative;
      font-size: 0.373333rem;
      padding-left: 0.533333rem;
      &::before {
        position: absolute;
        top: 0.013333rem;
        left: 0;
        content: "";
        width: 0.493333rem;
        height: 0.493333rem;
        background: url(../icons/i1.png) no-repeat center top;
        background-size: 0.493333rem 0.493333rem;
      }
    }
    a {
      font-size: 0.293333rem;
      color: #999999;
    }
  }

  // 第二个轮播图
  .stu_bd {
    padding-top: 0.466667rem;
    .swiper-container {
      width: 100%;
      height: 100%;
      padding-bottom: 0.6rem;
    }
    .swiper-slide {
      // text-align: center;
      width: 3.626667rem;
      font-size: 0.24rem;
      background: #fff;
      box-shadow: 0.013333rem 1px 0.133333rem 0.013333rem rgba(0, 0, 0, 0.1);
      border-radius: 0.066667rem;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
      // -webkit-box-pack: center;
      // -ms-flex-pack: center;
      // -webkit-justify-content: center;
      // justify-content: center;
      // -webkit-box-align: center;
      // -ms-flex-align: center;
      // // -webkit-align-items: center;
      // // align-items: center;
      padding: 0.066667rem;
      background-color: #fff;
      img {
        width: 100%;
        height: 2.28rem;
      }
      h5 {
        margin-top: 0.133333rem;
        padding-left: 0.066667rem;
        font-size: 0.24rem;
        font-weight: 400;
        // 只显示两行文字
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      p {
        margin-top: 0.2rem;
        margin-bottom: 0.333333rem;
        font-size: 0.293333rem;
        span {
          color: #ff4400;
        }
      }
    }
  }
}

// 底部模块
.footer {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  // 提高层级，避免前面的轮播图遮住
  z-index: 9999;
  width: 10rem;
  height: 1.533333rem;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #ccc;
  a {
    width: 100%;
    height: 100%;
    padding: 0.266667rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:nth-child(1) {
      color: #2ccac7;
    }
    &:nth-child(n + 2) {
      color: #666666;
    }
  }
  img {
    width: 0.533333rem;
    height: 0.533333rem;
  }
  p {
    margin-top: 0.133333rem;
    font-size: 0.293333rem;
  }
}
